<template>
	<!-- 最外层设置一个登录面板的div:login-container -->
	<div class="login-container">
		<!-- 登录盒子 -->
		<div class="login_box">

			<!-- 头像区  -->
			<div class="avatar_box">
				<img src="" alt="">
				<!-- 添加一个图片源 -->
			</div>

			<!-- 登录表单区 引用自element表单 -->
			<el-form ref="loginFormRef" :model="loginform" :rules="loginRules" label-width="0px" class="login_form">
				<!-- 用户名 -->
				<el-form-item prop="userId">
					<el-input v-model="loginform.userId" prefix-icon="iconfont icon-yonghu"></el-input>
					<span id="userInfo"></span>
				</el-form-item>
				<!-- 密码 -->
				<el-form-item prop="password">
					<el-input type="password" v-model="loginform.password" prefix-icon="el-icon-key"></el-input>
					<span id="pwdInfo"></span>
				</el-form-item>
				<!-- 按钮区 -->
				<el-form-item class="btns">
					<el-button type="primary" @click="login">登录</el-button>
					<el-button type="info" @click="resetLoginForm">重置</el-button>
					<el-button type="success" @click="Register">注册</el-button>
				</el-form-item>
			</el-form>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//登录表单的数据绑定对象
				loginform: {
					userId: 'admin',
					password: '123456'
				},
				//这是表单的验证规则
				loginRules: {
					//验证用户名是否合法
					userId: [{
							required: true,
							message: '用户名必填项',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 12,
							message: '长度在3-12之间',
							trigger: 'blur'
						}
					],
					//验证密码是否合法
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 10,
							message: '长度在6-15之间',
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			//点击注册按钮
			Register() {
				console.log('register');
				this.$router.replace( '/register');
			},
			//点击重置按钮，重置登录表单
			resetLoginForm() {
				//console.log(this)
				this.$refs.loginFormRef.resetFields()
			},
			//点击登录按钮，进行登录。
			login() {
				//1.进行基本校验
				this.$refs.loginFormRef.validate(async valid => {
					
					if (!valid) return; //校验失败：如果valid不正确就return出去
					
					const {
						data: resString
					} = await this.$http.post("login", this.loginform); //②接收后台返回的string数据：含有两块内容--flag和student <--| = |--> ①访问后台
					
					var res = JSON.parse(resString); //转换为json对象
					
					if (res.flag == "ok") {
						
						//存储token
						window.sessionStorage.setItem("token", res.token);
						
						//发送请求去获取用户数据
						const {data:userInfo} = await this.$http.get('getUserInfo');
						
						//存储userInfo
						window.sessionStorage.setItem("userInfo",userInfo);
						
						//登陆成功提示
						const h = this.$createElement; //使用这个可以定制message
						this.$notify({
							position: 'bottom-right',
							type: 'success',
							offset: 50, //距离窗口边缘偏移距离
							duration: 3000, //设置显示时间，0则不会消失
							title: '登录提示', //标题
							message: h('i', {
								style: 'color: teal'
							}, '登陆成功，欢迎使用'),
						});
						this.$router.push({path: "/home"}); 
						//Mark-1.3|页面路由跳转
						/* Mark:逻辑炸弹
							如果1.1放在1.3后面会无法跳转,
							因为路由导航卫士要先看你本地有没有session，
							没有是不会让你第一次就登录的
						 */
					} else {
						this.$notify.error({
							title: '登录提示', //标题
							message: '登录失败，请检查网络或者密码时候正确',
						});
					}
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	/* scoped 组件生效范围定为当前组件 */
	.login-container {
		background-color: dodgerblue;
		height: 100%; //将颜色铺满页面
	}

	//登录盒子的样式
	.login_box {
		border: 1px solid #eee;
		box-shadow: 0 0 10px #ddd;
		/* 设置形状颜色 */
		width: 450px;
		height: 300px;
		background-color: whitesmoke;
		border-radius: 20px; //盒子四角的曲率
		/* 设置位置 */
		position: absolute; //设置定位方式为ab方便精准设置位置
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%); //设置这个后位于正中央

		/* 在login_box中嵌套头像框样式 */
		.avatar_box {
			height: 130px;
			width: 130px;
			border: 1px solid #eee; //头像框的边框粗细和颜色
			border-radius: 50%; //头像框的曲率 圆
			padding: 10px;
			box-shadow: 0 0 10px #ddd;
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #fff;

			img {
				width: 100%;
				height: 100%;
				// border-radius:50% //图片也设置曲率为圆
				background-color: #eee; //头像框内部背景色
			}
		}

	}

	.login_form {
		position: absolute;
		top: 100px;
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.btns {
		display: flex;
		justify-content: flex-end;
	}
</style>
